<!-- 日历单元格 -->
<template>
  <div class="calendar-cell" :class="[`calender-week-${date.getDay()}`, tagStatus && `lagal-type-${tagStatus.legalType}`]">
    <div class="calendar-cell-content">
      <div class="div-1">
        {{ date.getDate() }}<span v-if="tagStatus" class="day-status">({{ tagStatus.legalTypeLabel }})</span>
      </div>
      <div class="div-2" v-if="isDev && isValid != 0"><el-button type="danger" :icon="Delete" size="small" circle @click="handlerClickBtnDelete(date)" /></div>
      <template v-if="isValid == 1">
        <div class="div-3">
          <div v-if="clockinInfo && clockinInfo.mornin !== ''">早：{{ clockinInfo.mornin }}</div>
          <div v-else>早：<TagButton @click="handlerClickTagButton0" /></div>
          <div v-if="clockinInfo && clockinInfo.evening !== ''">晚：{{ clockinInfo.evening }}</div>
          <div v-else>晚：<TagButton @click="handlerClickTagButton1" /></div>
        </div>
      </template>
      <template v-else-if="isValid == 2">
        <div v-if="clockinInfo.mornin == '' && clockinInfo.evening == ''" class="div-3 div-4">
          <el-button type="primary" size="large" @click="handleClickBtnOpenDialog(date)">打卡</el-button>
        </div>
        <div v-else class="div-3">
          <div v-if="clockinInfo && clockinInfo.mornin !== ''">早：{{ clockinInfo.mornin }}</div>
          <div v-else>早：<el-button type="primary" size="small" @click="handleClickBtnOpenDialog(date)">打早卡</el-button></div>
          <div v-if="clockinInfo && clockinInfo.evening !== ''">晚：{{ clockinInfo.evening }}</div>
          <div v-else>晚：<el-button type="primary" size="small" @click="handleClickBtnOpenDialog(date, '1')">打晚卡</el-button></div>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import * as utils from '../../utils'
import TagButton from './TagButton.vue'

const isDev = ref(true)
if (import.meta.env.VITE_APP_ENV === 'production') {
  isDev.value = false
}

const props = defineProps({
  date: {
    type: Date,
    default: () => ({}),
  },
  clockinInfo: {
    type: Object as any,
    default: () => ({
      mornin: '',
      evening: '',
    }),
  },
  legalList: {
    type: Array as any,
    default: () => [],
  },
})

const emits = defineEmits(['cellClick', 'cellDelete'])

const tagStatus = computed(() => {
  const legal = props.legalList.find((item: any) => item.legalDate == utils.formatDate(props.date, 'yyyy-MM-dd'))
  let result: any = null

  if (legal) {
    result = {
      legalType: legal.legalType,
      legalTypeLabel: legal.legalTypeLabel,
    }
  }
  return result
})


const handlerClickTagButton0 = () => {
  handleClickBtnOpenDialog(props.date, '0')
}
const handlerClickTagButton1 = () => {
  handleClickBtnOpenDialog(props.date, '1')
}

/**
 * 处理按钮点击事件以打开对话框
 *
 * @param date 日期对象
 */
const handleClickBtnOpenDialog = (date: Date, clockinCategory = '0') => {
  // console.log('handleClickBtnOpenDialog', date)
  emits('cellClick', { date, clockinCategory })
}

const handlerClickBtnDelete = (date: Date) => {
  // console.log('handlerClickBtnDelete', date)
  emits('cellDelete', date)
}

// 是否是有效的日期
const isValid = computed(() => {
  return utils.isDateLessThanOrEqual(props.date, new Date())
})
</script>
<style lang="scss" scoped>
.calendar-cell {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  .calendar-cell-content {
    position: absolute !important;
    width: 100%;
    height: 100%;
  }
  .div-1 {
    font-size: 28px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
  }
  .day-status {
    font-size: 16px;
    display: block;
    margin-left: 12px;
  }
  .div-2 {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    transition: all 0.3s ease;
  }
  .div-3 {
    // text-align: left;
    // position: absolute;
    // bottom: 0;
    // height: 60%;
    // width: 100%;
    flex: 1;
    margin-top: 50px;
    div {
      & + div {
        margin-top: 10px;
      }
    }
  }
  .div-4 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &:hover {
    .div-2 {
      opacity: 1;
    }
  }
}
</style>
